iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
0
自我挑戰組

JS30自我學習筆記系列 第 21

第二十堂 - Speech Detection

  • 分享至 

  • xImage
  •  

今天要為各位介紹的是一個很屌的實作–「語音辨識」。只要在網頁開啟麥克風功能,接著講的任何話都能夠被即時紀錄成文字,顯示在畫面上,從此不需聽錄音寫會議紀錄。若講到關鍵字"poo",就會變成一個可愛的大便圖案。但美中不足的地方是這個語音辨識精準度差強人意,不過只要花個十幾分鐘就能寫出這樣的功能,我覺得已經夠嚇唬人了。實作範例如下:

Imgur)

邏輯流程

  1. 開啟SpeechRecognition功能
  2. 監聽SpeechRecognition物件是否有result
  3. 抓取result內的文字
  4. 寫入HTML字串

課程重點

  1. 開啟SpeechRecognition功能:

    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    
    const recognition = new SpeechRecognition();
    recognition.interimResults = true;
    recognition.lang = 'en-US';
    
    recognition.start();
    

    可以看到有個屬性recognition.lang = 'en-US',所以我想應該是能夠設定中文辨識的。

  2. 抓取辨識文字並放入HTML:

    recognition.addEventListener('result', e => {
        const transcript = Array.from(e.results)
          .map(result => result[0])
          .map(result => result.transcript)
          .join('');
    
        const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '?');
        p.textContent = poopScript;
    
        if (e.results[0].isFinal) {
            p = document.createElement('p');
            words.appendChild(p);
        }
    });
    

    首先這個result監聽事件在你講話時會不斷被觸發,而這個e.results大概是長這樣:

    Imgur
    confidence是他辨識的信心程度,transcript是辨識內容,而isFinal是判斷這句話是否結束。而通常這個results的長度都是2,所以我們取得transcript後要用join('')來組合起來。

    中間我們可以自訂一些關鍵字來做特殊效果,這邊練習是若辨識字串中含有"poop"、"poo"等相關字,就用大便符號取代字串,再把字串放入HTML內容。

    若一句話講完,isFinal=true,就生成新的段落元素。


上一篇
第十九堂 - Webcam Fun
下一篇
第二十一堂 - Geolocation
系列文
JS30自我學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
UT
iT邦新手 5 級 ‧ 2018-11-05 22:59:16

太神啦
話說 這是範例 還是發洩/images/emoticon/emoticon37.gif

hank8124 iT邦新手 5 級 ‧ 2018-11-06 18:08:54 檢舉

範例是老師寫的歐^.<
但為了把大便的效果呈現出來,我只好造這樣的句子XDD

我要留言

立即登入留言